<template>
    <div class="tabs3">
        <el-tabs v-model='tabOneActive' tab-position="left" @tab-click="handleClick">
            <el-tab-pane v-for="(x,index) in tabsList" :key="x.id" :label="x.parameter" :name="x.parameter">
                <div v-if="x.parameter == '面料'" style="overflow: hidden;">
                    <el-input v-model="search" @input="handleClick" class="input_search" placeholder="请输入面料编号" style="width: 200px;margin-bottom: 10px;float: left;"/>
<!--                    <el-button type="primary" class="clothing-custom-btn" @click="handleClick" style="float:left;color: #efbc39;width: 80px;height: 40px;background: #171716;border-style: none;margin-left: 2px">查询</el-button>-->
					<!-- 刘郑鹏加的现实面料名称的地方-->
					<div v-if="fabricxianshi"  style="width: 100%;">
<!--					   <ul v-for="(x,index) in productData" style="float: left;" v-if="fabricxianshi">-->
<!--					      <li v-if="x.fabricName!='暂无'"  style=" float:left" >-->
<!--                            <el-button type="primary" style="color: #F9D532;width: 100px;height: 40px;background: #333333;border-style: none;margin-left: 20px;">已选面料：</el-button>-->
<!--							<el-button  style="color: black;width: 80px;height: 36px;background: white;border-style: none;">{{x.fabricName}}</el-button>&nbsp;-->
<!--                          </li>-->
<!--					   </ul>-->
                        <el-button type="primary" style="color: #F9D532;width: 100px;height: 40px;background: #333333;border-style: none;margin-left: 20px;">已选面料：</el-button>
                        <el-button  style="color: black;background: white;border-style: none;font-size: 15px;font-weight: bolder">
                            {{check_fabricName}}
                        </el-button>
					</div>
                </div>
                <div style="float: left;height: 40px;margin-right: 40px;padding-top: 1px;" v-show="x.parameter == '面料'">
                    <label>面料类型：</label>
                    <label>
                        <input name="type" type="radio" value="" @click="getFabricListBytype('')"/>&nbsp;全部
                    </label>
                    <label style="margin-left: 10px" v-for="(item,key) in fabricTypeList" :key="item.id">
                        <input name="type" type="radio"
                               :value="item.id" @click="getFabricListBytype(item.id)"
                               :label="item.fabricTypeName">&nbsp;{{ item.fabricTypeName }}
                    </label>
                </div>

                <div v-if="x.parameter == '底领呢'">
                  <el-input v-model="search_dilin" class="input_search" placeholder="请输入底领呢编号" style="width: 200px;"
                            @input="handleClick">
                  </el-input>
                </div>
                <div v-if="x.parameter == '里布'">
<!--                    <el-input v-model="search" class="input_search" placeholder="请输入里布编号">
                        <el-button slot="append" icon="el-icon-search" @click="Search(x.parameter)"></el-button>
                    </el-input>-->

                  <el-input v-model="search_libu" class="input_search" placeholder="请输入里布编号" style="width: 200px;"
                            @input="handleClick">
                  </el-input>
                </div>
                <div class="button_line" v-show="x.parameter == '纽扣'">
                    <label class="label">纽扣类型</label>
                    <label style="font-size: 15px;color: #000000;font-weight: bolder">
                        <input name="type" type="radio"
                               :value="0" @click="click_all"
                               :label="0">&nbsp;全部
                    </label>

<!--                        <a @click="click_all" style="font-size: 15px;color: #4d4d4d;margin-left: -10px">■全部</a>-->
<!--                        <label class="label"><a @click="click_all">全部</a></label>-->
<!--                    <el-checkbox-group v-model="checkList" :max="1" @change="checkboxChange" style="margin-left: 15px">-->
<!--                        <el-checkbox v-for="ck in checkData" :key="ck.id" :label="ck.id">{{ck.categoryName}}-->
<!--                        </el-checkbox>-->
<!--                    </el-checkbox-group>-->

<!--                    <el-radio-group name="radioGroup" v-model="checkList" @change="checkboxChange" style="margin-left: 0px">-->
<!--                        <el-radio v-for="ck in checkData" :value="ck.id" :label="ck.id">-->
<!--                            {{ck.categoryName}}-->
<!--                        </el-radio>-->
<!--                    </el-radio-group>-->

                    <label style="margin-left: 15px;font-size: 15px" v-for="(item,key) in checkData" :key="item.id">
                        <input name="type" type="radio"
                               :value="item.id"  @click="checkboxChange(item.id)"
                               :label="item.categoryName">&nbsp;{{ item.categoryName }}
                    </label>
                </div>



                <el-radio-group v-model="x.unit" @change="(item) => radioChange(item,x.parameter)" style="margin-top: 20px;">
                    <el-radio-button v-for="y in tabOneDataList[x.parameter]"
                                     :key="y.id" :label="y.id"
                                     :value="y.categoryName" :checked="is_cheack">
                        <i v-show="x.parameter == '面料'">{{y.fabricCode}}</i>
                        <i v-show="x.parameter == '里布'">{{y.libuCode}}</i>
                        <i v-show="x.parameter == '底领呢'">{{y.dilinniNumber}}</i>
                        <i v-show="x.parameter == '纽扣'">{{y.buttonsCode}}</i>
                        <div v-show="x.parameter == '里布'" @click="click_libu(y.id)"><img :src="y.libuImg" alt="" height="200px"></div>
                        <div v-show="x.parameter == '底领呢'" @click="click_dilin(y.id)"><img :src="y.img" alt="" height="200px"></div>
                        <div v-show="x.parameter == '面料' || x.parameter == '纽扣'"><img
                                :src="y.fabricImg == undefined ? y.buttonsImg : y.fabricImg" alt=""
                                @click="opeBuy(y,index,x)"></div>
                        <!--                    <b v-if="x.parameter != '纽扣'" @click="opeBuy(y,index)">当前库存量：{{y.inventory}}</b>-->
                        <!--                    <div v-show="x.parameter == '纽扣'"><strong>{{y.fabricName == undefined ? y.buttonsName : y.fabricName}}</strong></div>-->
                        <div v-show="x.parameter == '纽扣'"><strong>{{y.materialName}}</strong></div>
                    </el-radio-button>
                </el-radio-group>
            </el-tab-pane>
        </el-tabs>

        <div class="zhezhao" :class="zhezhaoOpen" @click="toggle"></div>
        <div :class="zhezhaoOpen" class="buy_wrap">
            <div class="buy">
                <div class="title">面料购买</div>
                <el-form :model="rule" :rules="rules" ref="buyforms" label-width="90px">
                    <el-form-item label="面料编号">
                        <el-input v-model="rule.fabricCode" placeholder="请填写面料编号" disabled clearable></el-input>
                    </el-form-item>
                    <el-form-item label="当前库存">
                        <el-input v-model="rule.inventory" placeholder="请填写当前库存" disabled clearable></el-input>
                    </el-form-item>
                    <el-form-item label="购买米数" prop="buy">
                        <el-input v-model="rule.buy" min="0" :max="rule.inventory" @blur.native.capture="numberChange" type="text" placeholder="请填写购买米数"
                                  clearable></el-input>
                    </el-form-item>
                    <el-form-item label="加工备注" v-show="rule.fabricCode=='-999999'">
                        <el-input v-model="rule.fabricRemark"  type="text" placeholder="请填写来料加工的备注" clearable></el-input>
                    </el-form-item>
                    <el-form-item class="info">详情请参照
                        <a><span @click="seeDuizhao" style="color: #ecbf1d">《单耗对照表》</span></a>
                    </el-form-item>
                </el-form>
                <div class="button">
                    <button class="delete" @click="close">取消</button>
                    <button class="edit" @click="buy">保存</button>
                </div>
            </div>
        </div>

        <!--面料分页插件-->
        <div class="mom-pagination" v-show="this.type==3">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageTotal"
                    :page-size="pageSize"
                    @next-click="currentPage+=1,handleCurrentChange"
                    @prev-click="currentPage-=1,handleCurrentChange"
                    @current-change="handleCurrentChange"
            >
            </el-pagination>
        </div>

        <!--里布分页插件-->
        <div class="mom-pagination" v-show="this.type==0">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageTotal0"
                    :page-size="pageSize0"
                    @next-click="currentPage0+=1,handleCurrentChange0"
                    @prev-click="currentPage0-=1,handleCurrentChange0"
                    @current-change="handleCurrentChange0"
            >
            </el-pagination>
        </div>

        <!--底领尼分页插件-->
        <div class="mom-pagination" v-show="this.type==1">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageTotal1"
                    :page-size="pageSize1"
                    @next-click="currentPage1+=1,handleCurrentChange1"
                    @prev-click="currentPage1-=1,handleCurrentChange1"
                    @current-change="handleCurrentChange1"
            >
            </el-pagination>
        </div>

        <!--纽扣分页插件-->
        <div class="mom-pagination" v-show="this.type==2">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="pageTotal2"
                    :page-size="pageSize2"
                    @next-click="currentPage2+=1,handleCurrentChange2"
                    @prev-click="currentPage2-=1,handleCurrentChange2"
                    @current-change="handleCurrentChange2"
            >
            </el-pagination>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {getAction, postAction} from "../../api/manage";
    import Qs from 'qs'

    export default {
        name: 'Tabs3',
        data() {
            return {
                check_fabricName:'',
				agreementId:1,
                fabric_type:'',//面料类型
                is_cheack:false,//是否被选中
				fabricxianshi:false,
				productData: [],//产品列表数据
                type: 3, // 辅料的类型 0里布，1低领尼，2纽扣 3面料
                pageTotal: '5', // 总条目
                pageSize: 10, // 页面大小
                currentPage: 1, // 当前页
                pageTotal1:'5',//底领呢
                pageSize1:'10',
                currentPage1:1,

                pageTotal0:'5',//里布
                pageSize0:'10',
                currentPage0:1,

                pageTotal2:'5',//纽扣
                pageSize2:'10',
                currentPage2:1,

                is_qiehuan: 0,
                tabsList: [],
                tabOneDataList: {},//tabsOne内的单选组数据
                tabOneActive: '',//导航栏1状态激活
                search: '',//搜索
                search_dilin:'',
                search_libu:'',
                checkList: [],//纽扣复选框已选择数组
                checkData: [],//纽扣复选框数据
                tabOneDataListTemp: [],//tabOneDataList，临时存量，用于数据集提取时保存原数据，以便纽扣类型复选框空选后还原最初全部数据
                zhezhaoOpen: 'close',//产品列表收展开关
                url: {
                    list: '/fabricAndOther/getFabricListnew', // 面料列表
                },
                rule: {
                    pnum: 0,//上一级下标
                    item: [],//藏一个选中对象
                    fabricCode: '',
                    inventory: '',
                    buy: '',
                    fabricRemark:''
                },
                checkedList: {},//选中且购买的数据
                rules: {
                    buy: [{required: true, message: '请填写购买米数', trigger: 'blur'}],
                },
                fabricTypeList:[],//面料类型
            }
        },
        computed: {
            getChecked() {
                return this.$store.state.OrderUser.Order_user_Info_temp.id;
            },
            getTypeids() {
                return this.$store.getters.getOrder_user_category_id();
            },
            sSwitch() {
                return this.switch;
            },
            switchKSGY() {
                return this.$store.state.OrderUser.Order_user_Info_temp.id;
            }
        },
        created() {
            // alert(this.$store.state.OrderUser.Order_user_Info_temp.id);
            this.getFabricByproductId();
			this.orderListOpen();
            this.currentPage = 1
            this.type = 3
            this.url.list = '/fabricAndOther/getFabricListnew'
            getAction(domain.publicUrl + this.url.list, {
                'pageNo': this.currentPage,
                'pageSize': 15,
                'fabricCode': this.search,
                'type':this.fabric_type
            }).then(res => {
                if (res.data.code == '0') {
                    Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                    Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                    this.pageTotal = res.data.data.total
                    this.pageSize = res.data.data.size
                }
            })
            //判断tabs2选择完成，再打开tabs3
            this.tabsList.length > 0 ? true : this.tabOpenBind();
            this.getfabric_typelist();
        },
        methods: {
            getFabricByproductId(){//根据产品id查询面料
                getAction(domain.publicUrl + "/logic/interface/query_fabricodeDetailByid", {
                    'product_id': this.$store.state.OrderUser.Order_user_Info_temp.id
                }).then(res => {
                    if (res.data.code == '0') {
                       this.check_fabricName = res.data.data;
                    }else {
                        this.check_fabricName='';
                    }
                })
            },
            getFabricListBytype(val){//面料类型查询面料
                this.fabric_type = val
                this.type = 3
                this.url.list = '/fabricAndOther/getFabricListnew'
                getAction(domain.publicUrl + this.url.list, {
                    'pageNo': this.currentPage,
                    'pageSize': 15,
                    'fabricCode': this.search,
                    'type':this.fabric_type
                }).then(res => {
                    if (res.data.code == '0') {
                        Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                        Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                        this.pageTotal = res.data.data.total
                        this.pageSize = res.data.data.size
                    }
                })
             },
            seeDuizhao(){//跳转单耗对照表


			getAction(domain.publicUrl + "/product/getcateId", {
			    'ids': this.$store.getters.getOrder_user_category_id()
			}).then(res => {
		               let routeUrl = this.$router.resolve({
		                   path: "/duizhao",query: {id:res.data.data.id,type:2}
		               });
		               //let routeUrl = this.$router.resolve(`/share/${96}`)
		               window.open(routeUrl.href, '_blank');
			})
            },
            click_all(){//纽扣的全部
                // alert("111")
                this.currentPage2=1;
                let partments = new FormData();
                partments.append("pageNo", this.currentPage2);
                partments.append("type", 2);
                partments.append("pageSize", 10);
                partments.append("code", this.search);
                partments.append("buttontype", "");
                partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                    Vue.set(this.tabOneDataListTemp, "纽扣", result.data.data.records)
                    Vue.set(this.tabOneDataList, "纽扣", result.data.data.records)
                    this.pageTotal2 = result.data.data.total
                    this.pageSize2 = result.data.data.size
                });
            },
            numberChange(){//面料米数的监听事件
                var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
                if (!reg.test(this.rule.buy)) {
                    this.$message.warning("请输入正确的米数,比如1或1.1")
                    this.rule.buy='1.0';
                    return
                }else {
                    let inputnumber = this.rule.buy;//10.234
                    if(inputnumber.split(".").length == 0){
                        this.rule.buy=inputnumber;
                        return;
                    }else {
                        var number_zu = inputnumber.toString().split(".");
                        var jisaun_number = inputnumber.split(".").join("");
                        // alert("数组=="+number_zu+"==涨肚="+number_zu.length+"=小数点后的=="+number_zu[1].length)
                        if(number_zu[1].length >= 0 && number_zu[1].length < 2){
                            this.rule.buy=inputnumber;
                            return;
                        }else if(number_zu[1].length >= 2){
                            let num1 = jisaun_number / 100 + 0.1;
                            let num2 = num1 * 10;
                            let num3 = num2 / 10;
                            var number_zu2 = num3.toString().split(".");
                            let lostnum = number_zu2[0]+"."+number_zu2[1].substring(0,1)
                            // var str = num3.substring(0,num3.length-1);//截取第二个到第四个之间的字符 cd
                            // alert(inputnumber+"==最后孩子=="+num1+"==="+num3+"==最后="+number_zu2+"=="+lostnum)
                            this.rule.buy=lostnum;
                            return;
                        }
                    }
                }
            },
			 orderListOpen() {
			      let p1 = new FormData();
			      p1.append('token',localStorage.getItem("token"));
			      p1.append('orderSn',this.$store.state.OrderUser.Order_user_InfoData.orderSn);
			      this.$http.post('logic/interface/query_AllproductsByordersn',p1).then(result => {
			          if(result.data.data.length > 1 || result.data.data[0].leibieName != '暂无') {
						  this.fabricxianshi=true;
			              this.productData = result.data.data;
			          }
			      });
			  },

            click_libu(libu_id){
                // alert(libu_id);
                this.$store.state.OrderUser.Order_user_Info_temp.libuId=libu_id+"";
            },
            click_dilin(dilinli_id){
                // alert(dilinli_id);
                this.$store.state.OrderUser.Order_user_Info_temp.dilinliId=dilinli_id+"";
            },
            // 查询按钮
            onSubmit() {
                let param = {
                    pageNo: this.currentPage,
                    pageSize: 10,
                    type: this.type,
                    categoryIds: this.$store.getters.getOrder_user_category_id()
                }
                postAction(domain.publicUrl + this.url.list, Qs.stringify(param)).then(res => {
                    if (this.type == 3) {
                        Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                        Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                    } else if (this.type == 0) {
                        Vue.set(this.tabOneDataListTemp, "里布", res.data.data.records)
                        Vue.set(this.tabOneDataList, "里布", res.data.data.records)
                    } else if (this.type == 1) {
                        Vue.set(this.tabOneDataListTemp, "底领里", res.data.data.records)
                        Vue.set(this.tabOneDataList, "底领里", res.data.data.records)
                    } else if (this.type == 2) {
                        Vue.set(this.tabOneDataListTemp, "纽扣", res.data.data.records)
                        Vue.set(this.tabOneDataList, "纽扣", res.data.data.records)
                    }
                    this.pageTotal = res.data.data.total
                    this.pageSize = res.data.data.size
                })
            },

            // 分页触发请求
            handleCurrentChange(val) {
                // alert(val);
                this.currentPage = val
                this.type = 3
                this.url.list = '/fabricAndOther/getFabricListnew'
                getAction(domain.publicUrl + this.url.list, {
                    'pageNo': this.currentPage,
                    'pageSize': 15,
                    'fabricCode': this.search,
                    'type':this.fabric_type
                }).then(res => {
                    if (res.data.code == '0') {
                        Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                        Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                        this.pageTotal = res.data.data.total
                        this.pageSize = res.data.data.size
                    }
                })
            },
            // 分页触发请求
            handleCurrentChange0(val) {
                // alert(this.type+"==="+val+"===ids="+this.$store.getters.getOrder_user_category_id())
                this.currentPage0 = val
                let partments = new FormData();
                partments.append("pageNo", this.currentPage0);
                partments.append("pageSize", 10);
                partments.append("type", 0);
                partments.append("code", this.search_libu);
                partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                    Vue.set(this.tabOneDataListTemp, "里布", result.data.data.records)
                    Vue.set(this.tabOneDataList, "里布", result.data.data.records)
                    this.pageTotal0 = result.data.data.total
                    this.pageSize0 = result.data.data.size
                });
            },
            // 分页触发请求
            handleCurrentChange1(val) {
                // alert(this.type+"==="+val+"===ids="+this.$store.getters.getOrder_user_category_id())
                this.currentPage1 = val
                let partments = new FormData();
                partments.append("type", 1);
                partments.append("code", this.search_dilin);
                partments.append("pageNo", this.currentPage1);
                partments.append("pageSize", 10);
                partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                    Vue.set(this.tabOneDataListTemp, "底领呢", result.data.data.records)
                    Vue.set(this.tabOneDataList, "底领呢", result.data.data.records)
                    this.pageTotal1 = result.data.data.total
                    this.pageSize1 = result.data.data.size
                });
            },
            // 分页触发请求
            handleCurrentChange2(val) {
                // alert(this.type+"==="+val+"===ids="+this.$store.getters.getOrder_user_category_id())
                this.currentPage2 = val
                let partments = new FormData();
                partments.append("type", 2);
                partments.append("pageNo", this.currentPage2);
                partments.append("pageSize", 10);
                partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                    Vue.set(this.tabOneDataListTemp, "纽扣", result.data.data.records)
                    Vue.set(this.tabOneDataList, "纽扣", result.data.data.records)
                    this.pageTotal2 = result.data.data.total
                    this.pageSize2 = result.data.data.size
                });
            },

            // 面料类型
            getfabric_typelist() {
                this.$http.post('/fabric/getFabricTypeList').then(result => {
                    this.fabricTypeList = result.data.data
                });
            },

            handleClick() {
				  this.fabricxianshi=false;
                // alert(this.is_qiehuan+"==="+this.tabOneActive+"==="+this.$store.getters.getOrder_user_category_id())
                if (this.tabOneActive == '面料') {
                    this.getfabric_typelist();
					 this.orderListOpen();
                    this.type = 3
                    this.currentPage = 1
                    this.url.list = '/fabricAndOther/getFabricListnew'
                    getAction(domain.publicUrl + this.url.list, {
                        'pageNo': this.currentPage,
                        'pageSize': 15,
                        'fabricCode': this.search,
                        'type':this.fabric_type
                    }).then(res => {
                        if (res.data.code == '0') {
                            Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                            Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                            this.pageTotal = res.data.data.total
                            this.pageSize = res.data.data.size
                        }
                    })
                    this.getFabricByproductId();
                } else if (this.tabOneActive == '里布') {
                    /*this.currentPage = 1*/
                    this.currentPage0=0
                    this.type = 0
                    this.url.list = '/logic/interface/query_materialPageList'
                    // alert(this.$store.getters.getOrder_user_category_id() + "===")
                    let partments = new FormData();
                    partments.append("pageNo", this.currentPage0);
                    partments.append("pageSize", 10);
                    partments.append("type", 0);
                    partments.append("code", this.search_libu);
                    partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                    this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                        Vue.set(this.tabOneDataListTemp, "里布", result.data.data.records)
                        Vue.set(this.tabOneDataList, "里布", result.data.data.records)
                        this.pageTotal0 = result.data.data.total
                        this.pageSize0 = result.data.data.size
                    });
                } else if (this.tabOneActive == '底领呢') {
                    this.currentPage1 = 1
                    this.type = 1
                    // alert(this.$store.getters.getOrder_user_category_id() + "===")
                    let partments = new FormData();
                    partments.append("type", 1);
                    partments.append("code", this.search_dilin);
                    partments.append("pageNo", this.currentPage1);
                    partments.append("pageSize", 10);
                    partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                    this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                        Vue.set(this.tabOneDataListTemp, "底领呢", result.data.data.records)
                        Vue.set(this.tabOneDataList, "底领呢", result.data.data.records)
                        this.pageTotal1 = result.data.data.total
                        this.pageSize1 = result.data.data.size
                    });
                } else if (this.tabOneActive == '纽扣') {
                    this.url.list = '/logic/interface/query_materialPageList'
                    this.currentPage2 = 1
                    this.type = 2
                    let partments = new FormData();
                    partments.append("type", 2);
                    partments.append("pageNo", this.currentPage2);
                    partments.append("pageSize", 10);
                    partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                    this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                        Vue.set(this.tabOneDataListTemp, "纽扣", result.data.data.records)
                        Vue.set(this.tabOneDataList, "纽扣", result.data.data.records)
                        this.pageTotal2 = result.data.data.total
                        this.pageSize2 = result.data.data.size
                    });
                } else {
                    this.type = 3
                    this.currentPage = 1
                    this.url.list = '/fabricAndOther/getFabricListnew'
                    /*let huakuanData = new FormData();
                    huakuanData.append("token", localStorage.getItem("token"));
                    huakuanData.append("typeId", '0');
                    this.$http.post('/fabricAndOther/getSingleFabricList', huakuanData).then(result => {
                        Vue.set(this.tabOneDataListTemp, '面料', result.data.data)
                        Vue.set(this.tabOneDataList, '面料', result.data.data)
                    });*/
                    getAction(domain.publicUrl + this.url.list, {
                        'pageNo': this.currentPage,
                        'pageSize': 15
                    }).then(res => {
                        if (res.data.code == '0') {
                            Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                            Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                            this.pageTotal = res.data.data.total
                            this.pageSize = res.data.data.size
                        }
                    })
                }
            },

            async tabOpenBind() {
                this.type = 3
                let p1 = new FormData();
                p1.append('module_id', 2);
                p1.append('category_id', 0);
                await this.$http.post('logic/interface/query_mstemplateinfo', p1).then(async (result) => {
                    //#region 获取纽扣复选框数据
                    let params2 = new FormData();
                    params2.append("moudleId", result.data.data[0].id);
                    await this.$http.post('/fabricAndOther/getButtonSelect', params2).then(async (result) => {
                        this.checkData = result.data.data;
                    });
                    //#endregion
                    //#region 插入固定三项
                    result.data.data.unshift(
                        {
                            categoryId: "0",
                            id: 0,
                            imgs: null,
                            isRequired: 0,
                            max: null,
                            min: null,
                            moduleId: "3",
                            numbers: 0,
                            parameter: "面料",
                            parameterValue: "面料",
                            parentId: null,
                            promptContent: null,
                            unit: null
                        },
                        {
                            categoryId: "0",
                            id: 1,
                            imgs: null,
                            isRequired: 0,
                            max: null,
                            min: null,
                            moduleId: "3",
                            numbers: 0,
                            parameter: "里布",
                            parameterValue: "里布",
                            parentId: null,
                            promptContent: null,
                            unit: null
                        },
                        {
                            categoryId: "0",
                            id: 2,
                            imgs: null,
                            isRequired: 0,
                            max: null,
                            min: null,
                            moduleId: "3",
                            numbers: 0,
                            parameter: "底领呢",
                            parameterValue: "底领呢",
                            parentId: null,
                            promptContent: null,
                            unit: null
                        });
                    //#endregion
                    this.tabsList = result.data.data;
                    this.tabOneActive = this.tabsList[0].parameter;//初始化激活定位
                    // let category_ids = 0;

                    this.currentPage = 1
                    this.url.list = '/fabricAndOther/getFabricListnew'
                    getAction(domain.publicUrl + this.url.list, {
                        'pageNo': this.currentPage,
                        'pageSize': 10
                    }).then(res => {
                        if (res.data.code == '0') {
                            Vue.set(this.tabOneDataListTemp, '面料', res.data.data.records)
                            Vue.set(this.tabOneDataList, '面料', res.data.data.records)
                            this.pageTotal = res.data.data.total
                            this.pageSize = res.data.data.size
                        }
                    })

                    //复位
                    if (!!this.$store.state.OrderUser.Order_user_Info_temp.fabricIds) {
                        let arr = this.$store.state.OrderUser.Order_user_Info_temp.fabricIds.split(',');
                        for (let item of arr) {
                            let id = item.split('/')[0];
                            let buy = item.split('/')[1];
                            for (let x in this.tabOneDataList) {
                                if (x != '纽扣') {
                                    for (let y in this.tabOneDataList[x]) {
                                        if (this.tabOneDataList[x][y].id == id) {
                                            for (let zitem of this.tabsList) {
                                                if (zitem.parameter == x) {
                                                    zitem.unit = id;
                                                    this.tabOneDataList[x][y].buy = buy;
                                                }
                                            }
                                        }
                                    }
                                } else {
                                    this.tabsList[3].unit = this.$store.state.OrderUser.Order_user_Info_temp.buttonsIds;
                                }
                            }
                        }
                    }
                    //复位
                    if (!!this.$store.state.OrderUser.Order_user_Info_temp.buttonsIds) {
                        this.tabsList[3].unit = this.$store.state.OrderUser.Order_user_Info_temp.buttonsIds;
                    }
                    //里布复位
                    if (!!this.$store.state.OrderUser.Order_user_Info_temp.buttonsIds) {
                        this.tabsList[1].unit = this.$store.state.OrderUser.Order_user_Info_temp.libuId;
                    }
                    //底领呢复位
                    if (!!this.$store.state.OrderUser.Order_user_Info_temp.buttonsIds) {
                        this.tabsList[2].unit = this.$store.state.OrderUser.Order_user_Info_temp.dilinliId;
                    }
                });
            },
            opeBuy(y, pid, x) {
                this.check_fabricName=y.fabricCode;
                this.rule.pnum = pid;
                this.rule.item = y;
                this.rule.fabricCode = y.fabricCode,
                    this.rule.inventory = y.inventory,
                    this.rule.buy = y.buy == undefined ? '' : y.buy;
                if (x.parameter != '纽扣') {
                    this.zhezhaoOpen = 'open';
                }
            },
            Search(type) {
                let data = this.tabOneDataList[type].filter(item => {
                    return item.fabricName == this.search;
                });
                if (data.length > 0) {
                    for (let x of this.tabsList) {
                        if (x.parameter == type) {
                            x.unit = data[0].id;
                        }
                    }
                }
            },
            checkboxChange(val) {//纽扣类型切换事件
                // alert(val)
                let partments = new FormData();
                partments.append("pageNo", this.currentPage2);
                partments.append("type", 2);
                partments.append("pageSize", 10);
                // partments.append("code", this.search);
                partments.append("buttontype", val);
                partments.append("categoryIds", this.$store.getters.getOrder_user_category_id());
                this.$http.post('logic/interface/query_materialPageList', partments).then(result => {
                    Vue.set(this.tabOneDataListTemp, "纽扣", result.data.data.records)
                    Vue.set(this.tabOneDataList, "纽扣", result.data.data.records)
                    this.pageTotal2 = result.data.data.total
                    this.pageSize2 = result.data.data.size
                });
            },
            buy() {
                this.$refs['buyforms'].validate(valid => {
                    if (valid) {
                        if(this.rule.fabricCode=='-999999'){
                            if(this.rule.fabricRemark==null || this.rule.fabricRemark==''){
                                this.$message.warning("来料加工需要输入特殊备注")
                                return false;
                            }
                        }
                        if (this.rule.inventory < this.rule.buy) {
                            // this.$message({
                            //     message:'超出库存量',type: 'error'
                            // });
                            this.$message.warning("超出库存量")
                            return false;
                        } else {
                            let index = this.rule.pnum;
                            Vue.set(this.checkedList, index, this.tabsList[index].unit + '/' + this.rule.buy);
                            this.rule.item.buy = this.rule.buy;
                            this.zhezhaoOpen = 'close';
                            let fabricIds = '';
                            for (let item in this.checkedList) {
                                fabricIds += ',' + this.checkedList[item];
                            }
                            this.$store.state.OrderUser.Order_user_Info_temp.fabricIds = fabricIds.substr(1, fabricIds.length);
                            this.$store.state.OrderUser.Order_user_Info_temp.fabricRemark = this.rule.fabricRemark;
                        }
                    } else {
                        this.$message({
                            message: '请填写购买米数', type: 'error'
                        });
                    }
                });
            },
            close() {
                this.tabsList[this.rule.pnum].unit = undefined;
                for (let x in this.rule) {
                    this.rule[x] = '';
                }
                this.zhezhaoOpen = 'close';
            },
            toggle() {
                this.zhezhaoOpen = this.zhezhaoOpen == 'open' ? 'close' : 'open';
            },
            radioChange(value, type) {
                if (type == "纽扣") {
                    this.$store.state.OrderUser.Order_user_Info_temp.buttonsIds = value;
                }
            },
            async tabsOneRadioChange(val) {
                //监听单选按钮组选中变化，适用于单选变化后，下级全部重新请求且做数组第一项默认
                let category_ids = '';
                for (let i = 0; i < this.tabsList.length; i++) {
                    if (val >= i) {
                        //存储靶向上级已经单选的id
                        category_ids += ',' + this.tabsList[i].unit;
                    } else {
                        //靶向下级重新请求数据
                        await this.$http.post('logic/interface/query_categoryinfo', {
                            template_id: this.tabsList[i].id,
                            category_ids: category_ids.substr(1, category_ids.length)
                        }).then(result => {
                            Vue.set(this.tabOneDataList, this.tabsList[i].parameter, result.data.data)
                            //默认选中第一个
                            if (result.data.data.length > 0) {
                                this.tabsList[i].unit = result.data.data[0].id;
                                category_ids += ',' + this.tabsList[i].unit;
                            } else {
                                this.tabsList[i].unit = undefined;
                            }
                        });
                    }
                }
            },
        },
        watch: {
            getChecked() {
                this.tabOpenBind();
            }
        },
    }
</script>

<style scoped lang="scss">
    .tabs3 /deep/ .el-radio-group label {
        position: relative;
        width: 172px;
        margin-bottom: 20px;
    }

    .tabs3 /deep/ .el-radio-button__inner {
        padding: 0;
        border-radius: 0 !important;
        border: 1px solid #DCDFE6;
        display: block;
    }

    .tabs3 /deep/ .el-radio-group input[type=radio]:checked + .el-radio-button__inner {
        background: #ffffff;
        border-color: $color;
        color: $font_color;
        box-shadow: 0 0 0 0 $color;
    }

    .tabs3 label img {
        width: 170px;
        height: 170px;
        margin: 0 auto;
    }

    .tabs3 /deep/ .el-radio-button__inner i {
        font-style: normal;
        line-height: 25px;
        padding: 0 10px;
        position: absolute;
        top: 0;
        right: 0;
        background: $borderColor;
    }

    .tabs3 /deep/ .el-radio-button__inner b {
        font-weight: inherit;
        display: block;
        line-height: 25px;
    }

    .tabs3 /deep/ .el-radio-button__inner strong {
        font-size: 12px;
        font-weight: inherit;
        display: inline-block;
        background: #EAEAEA;
        padding: 5px 12px;
        border-radius: 5px;
        margin: 7px 0;
    }

    .tabs3 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner strong {
        background: $color;
        font-weight: bold;
    }

    .tabs3 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner b {
        background: $color;
    }

    .tabs3 /deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner i {
        background: $color;
    }

    .tabs3 .button_line {
        margin-bottom: 20px;
    }

    .tabs3 .button_line .label {
        margin-right: 40px;
    }

    .tabs3 .button_line .label, .tabs3 .button_line .el-checkbox-group {
        display: inline-flex;
    }

    .buy_wrap {
        position: relative;
        height: 100%;
        align-content: center;
    }

    .buy_wrap.open .buy {
        transition: all .7s ease-out;
    }

    .buy_wrap.close .buy {
        top: 100px;
        visibility: hidden;
    }

    .buy {
        background: #ffffff;
        z-index: 999;
        position: fixed;
        top: 50%;
        left: 50%;
        padding: 20px 30px;
        border-radius: 5px;
        width: 450px;
        margin-left: -225px;
        margin-top: -160px;
        box-shadow: 1px 2px 15px 6px rgba(0,0,0,0.3);
    }

    .buy .el-input {
        width: 240px;
    }

    .buy .title {
        margin: 0px 0 20px 0px;
        border-left: 5px solid #000000;
        padding-left: 15px;
        font-size: 16px;
    }

    .buy .info {
        margin-bottom: 30px;
        font-size: 14px;
    }

    .buy .info /deep/ div {
        line-height: 20px !important;
    }

    .buy .info a {
        color: $color;
    }

    .buy .button {
        float: right;
    }

    .buy button {
        border: none;
        width: 100px;
        height: 40px;
        line-height: 40px;
        border-radius: 5px;
        margin-left: 20px;
        cursor: pointer;
    }

    .buy .edit {
        background: #000000;
        color: #FFFFFF;
    }

    .buy .delete {
        background: #EAEAEA;
    }

    .mom-pagination {
        text-align: center;
        margin: 35px 0 0;
    }
</style>
